gray($amount) {
  lighten(#000000, $amount);
}

// Text Colors
$text-color            = gray(80%);
$text-color-subtle     = gray(50%);
$text-color-highlight  = gray(90%);
$text-color-selected   = $text-color-highlight;

$text-color-info       = hsl(219,  79%, 66%);
$text-color-success    = hsl(140,  44%, 62%);
$text-color-warning    = hsl( 36,  60%, 72%);
$text-color-error      = hsl(  9, 100%, 64%);

// Base colors
$base-background-color = #1e1e1e;
$second-background-color = #252526;
$base-border-color     = #444;
$base-top-menu-bar-background = #333333;
// Background colors
$background-color-info= #0098ff;
$background-color-success= #17ca65;
$background-color-warning= #ff4800;
$background-color-error= #c00;

$background-color-highlight= hsla(0,0%,0%,.1);
$background-color-selected= $background-color-highlight;
$app-background-color= #333;

// Component colors
$pane-item-background-color= $base-background-color;
$pane-item-border-color= $base-border-color;

$input-background-color= #333;
$input-border-color= $base-border-color;

$tool-panel-background-color= #f4f4f4;
$tool-panel-border-color= $base-border-color;

$inset-panel-background-color= #eee;
$inset-panel-border-color= $base-border-color;

$panel-heading-background-color= #ddd;
$panel-heading-border-color= transparent;

$overlay-background-color= #f4f4f4;
$overlay-border-color= $base-border-color;

$button-background-color= #ccc;
$button-background-color-hover= lighten($button-background-color, 5%);
$button-background-color-selected= $button-background-color-hover;
$button-border-color= #aaa;

$tab-bar-background-color    = #252526;
$tab-bar-border-color        = $base-border-color;
$tab-background-color        = #2d2d2d;
$tab-background-color-active = #1e1e1e;
$tab-background-color-hover = #2b2b2b;
$tab-border-color            = $base-border-color;

$tree-view-background-color= $tool-panel-background-color;
$tree-view-background-color-highlight= darken($tree-view-background-color, 70%);
$tree-view-border-color= $tool-panel-border-color;


$menu-background-color= $app-background-color
$menu-border-color= darken($base-border-color, 15%);
$menu-background-color-highlight = hsl(213, 83, 58);

// Site colors
$ui-site-color-1= $background-color-success; // green
$ui-site-color-2= $background-color-info; // blue
$ui-site-color-3= $background-color-warning; // orange
$ui-site-color-4= #db2ff4; // purple
$ui-site-color-5= #f5e11d; // yellow

// Sizes
$font-size= 13px;
$input-font-size= 14px;

$disclosure-arrow-size= 12px;

$component-padding= 10px;
$component-icon-padding= 5px;
$component-icon-size= 16px;
$component-line-height= 25px;
$component-border-radius= 2px;

$tab-height= 28px;

// Other
$font-family= 'BlinkMacSystemFont', 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, sans-serif;
$use-custom-controls= true; // false uses native controls


// Git status colors
$modified-color = #578ddf;
$untracked-color = #0fd000;
$confliction-color = #c13d00;
$added-color = #0fd000;
$deleted-color = #616161;

$tree-view-folder-color= #8f9ca3;

// Markdown preview

$md-color = $text-color
$md-bg = $base-background-color

$md-title-color = $text-color-highlight
$md-border-color = $base-border-color

$md-color-2 = #777;
$md-border-color-2 = #777;
$md-color-2 = #aaa;
$md-blockquote-bg = rgba(255, 255, 255, .2);
$md-bg-2 = #555;
$md-bg-3 = #464646;
$md-bg-4 = #3c3c3c;

:export
    textColor: $text-color
    textColorSubtle: $text-color-subtle
    tabBackgroundColor: $tab-background-color
    tabBackgroundColorActive: $tab-background-color-active
    textColorSelected: $text-color-selected
    tabBorderColor: $tab-border-color
    toolPanelBackgroundColor: $tool-panel-background-color
    baseBackgroundColor: $base-background-color
    inputBackgroundColor: $input-background-color
    inputBorderColor: $input-border-color
    appBackgroundColor: $app-background-color
